<template>
    <div class="wrapper">
        <div class="total">请确认以下订单信息：</div>
        <div class="text-info border-bottom">
            <div class="title">{{title}}</div>
            <div class="price">
                    <span class="before">￥</span>
                    <em class="price-text">{{price}}</em>
                    <span class="after">/张</span>
            </div>
            <div class="number">
                <div class="item reduce" @click="reduceNumber">-</div>
                <div class="item num">{{this.number}}</div>
                <div class="item add" @click="addNumber">+</div>
            </div>
        </div>
        <div class="submit"><span>￥{{this.sum}} </span>提交订单</div>
    </div>
</template>

<script>
export default {
    name: 'OrderContent',
    props: {
        price: String,
        title: String,
        img: String
    },
    data () {
        return {
            number: 1,
            sum: ''
        }
    },
    methods: {
        reduceNumber () {
            if (this.number > 1) {
                this.number--
                this.sum = this.number * this.price
            }
        },
        addNumber () {
            this.number++
            this.sum = this.number * this.price
        }
    },
    deactivated () {
        // 监听离开页面时   恢复number默认值 1
        this.number = 1
    },
    watch: {
        // 把props的数据传给data 通过watch监听
        price: function (newVal, oldVal) {
            this.sum = newVal
        }
    }
}
</script>

<style lang="stylus" scoped>
    .total
        background-color #eee
        width 100%
        height .82rem
        line-height .82rem
        padding-left .2rem
    .text-info
        width 100%
        height auto
        line-height .42rem
        font-size .36rem
        padding .3rem
        .title
            width 90%
            color #333
            line-height .5rem
        .price
            position relative
            width 100%
            bottom 0
            padding-top .6rem
            color #888
            font-size 0
            .before
                font-size .3rem
                color #ff8300
            .price-text
                color #ff8300
                font-size .48rem
            .after
                font-size .2rem
                color #ff8300
        .number
            display flex
            justify-content center
            align-items center
            padding-top .1rem
            width 1.5rem
            z-index 99
            right .2rem
            color #333
            .item
                flex 2
                float left
                border .01rem solid #ccc
                text-align center
            .num
                flex 4
    .submit
        position absolute
        bottom 0
        width 100%
        height 1.3rem
        line-height 1.3rem
        background-color #ff8300
        text-align center
        font-size .38rem
        color #fff
        span
            font-size .44rem
            font-weight 700
</style>
